<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<link rel="shortcut icon" href="http://first.52carlife.com/newnewicon.png">
	<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/Swiper/4.4.6/css/swiper.min.css" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="assets/css/header.css">
	<link rel="stylesheet" type="text/css" href="assets/css/index.css">
	<link rel="stylesheet" type="text/css" href="assets/css/footer.css">
	<link rel="stylesheet" type="text/css" href="assets/css/service.css">
	<link rel="stylesheet" type="text/css" href="assets/css/productSho.css">
</head>
<body>

	<nav id="navbar-example" class="navbar navbar-fixed-top navbar-inverse navbar-default nav-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
				<a href="#" class="brand" style="margin: 0; float: none;">
					<img src="http://first.52carlife.com/navlogo@2x.png" class="imag" alt="卡莱"/>
				</a>
		</div>
		<div class="collapse navbar-collapse navbar-title" id="navbar-menu">
			<ul class="nav navbar-nav navbar-right">
				<li class="active nav-title" id="indexCar"><a href="#">首页</a></li>
				<li class="nav-title" id="serviceCar"><a href="#">项目服务</a></li>
				<li class="nav-title" id="showCar"><a href="#">产品展示</a></li>
				<li class="nav-title" id="contactCar"><a href="#">联系我们</a></li>
			</ul>
		</div>
	</div>
</nav>
<div class="swiper-container">
			<div class="swiper-wrapper">
				
				<div class="swiper-slide header-swiper" id="swiper1">
					<div id="page1"></div>
					<div class="content-bottom">
							<img src="http://first.52carlife.com/haitingNES_icon@2x.png" alt="卡莱">

							<div id='Marquee' style='top:0px;'>
								<div>
								<span class=''>今日头条：9岁男孩参加听力考试后，耳朵突然聋了？</span>
								</div>
							</div>

							<div class="look-more">
								<span>查看更多 &nbsp;&gt;&gt;</span>
							</div>
						</div>
				</div>
				<div class="swiper-slide service-swiper" id="swiper4">
						<div id="page4"></div>
					</div>
				<div class="swiper-slide product-swiper" id="swiper2">
					<div id="page2"></div>
				</div>
				<div class="swiper-slide foo-swiper" id="swiper5">
					<div id="page3"></div>
				</div>
				
			</div>
		</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.4.6/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">

  onload=function(){setTimeout(start,stoptime)};var Mar = document.getElementById("Marquee");
        var child_div=Mar.getElementsByTagName("div")
        var picH = 20;//移动高度
        var scrollstep=3;//移动步幅,越大越快
        var scrolltime=40;//移动频度(毫秒)越大越慢
        var stoptime=3000;//间断时间(毫秒)
        var tmpH = 0;
        Mar.innerHTML += Mar.innerHTML;
        function start(){
            if(tmpH < picH){
                tmpH += scrollstep;
                if(tmpH > picH )tmpH = picH ;
                Mar.scrollTop = tmpH;
                setTimeout(start,scrolltime);
            }else{
                tmpH = 0;
                Mar.appendChild(child_div[0]);
                Mar.scrollTop = 0;
                setTimeout(start,stoptime);
            }
        }
        onload=function(){setTimeout(start,stoptime)};



	 var mySwiper = new Swiper('.swiper-container',{
          direction: "vertical",
        autoplay: false,
        speed: 1000,
        preventClicks: false,
        mousewheel: true,
        autoHeight: true,
        height: window.innerHeight, // 高度设置，占满设备高度
        onSlideChangeStart: function(swiper) {
          //滑动父级需要激活滚轮事件
          swiper.enableMousewheelControl();
        },
		on: {
			slideChangeTransitionStart: function(){
				if(this.activeIndex==0){       
					$(".navbar-fixed-top").removeClass("nav-topChange");
				}else{
					$(".navbar-fixed-top").addClass("nav-topChange");
				}
				$(".navbar-right").find('li').eq(this.activeIndex).addClass("active").siblings().removeClass("active");
		  },
        },	
  })
  // 点击事件
			$('#indexCar').click(function(){
				mySwiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒
				$(".navbar-fixed-top").removeClass("nav-topChange");
			})
			$("#serviceCar").click(function () {
			  mySwiper.slideTo(1, 1000, false);//切换到第2个slide，速度为一秒
				$(".navbar-fixed-top").addClass("nav-topChange");
			})
			$("#showCar").click(function () {
			  mySwiper.slideTo(2, 1000, false);//切换到第3个slide，速度为1秒
				$(".navbar-fixed-top").addClass("nav-topChange");
			})
			$("#contactCar").click(function () {
				$(".navbar-fixed-top").addClass("nav-topChange");
			  mySwiper.slideTo(3, 1000, false);//切换到第4个slide，速度为1秒
			})
//   点击变化
        $(function(){
            $(".navbar-right>li").click(function(){//直接点击事件
                //给当前点击的li一个样式 移除当前li的所有同胞元元素的样式
                $(this).addClass("active").siblings().removeClass("active");
            })
          })
  $("#page1").load("pages/header.html");
  $("#page2").load("pages/productSho.html");
  $("#page3").load("pages/contactUs.html");
  $("#page4").load("pages/service.html");
</script>
</body>
</html>